<script setup name="Password">
import { getListAPI, preserveDataAPI } from '@/api/system/password'
const { proxy } = getCurrentInstance()
const ruleForm = reactive({
  id: '',
  box: '',
  passwordLength: '', // 密码长度
  containsLetters: '', // 是否包含字母 0：不勾选，1：勾选
  containsCharacters: '', // 是否包含特殊字符 0：不勾选，1：勾选
  containsUpLetters: '', // 是否包含大写字母 0：不勾选，1：勾选
  initialPassword: '' // 初始密码
})

const rules = reactive({})

// 保存
const preserve = async () => {
  await preserveDataAPI(ruleForm)
  proxy.successMsg('修改成功')
  getList()
}

const getList = async () => {
  const res = await getListAPI()
  ruleForm.id = res.id
  ruleForm.initialPassword = res.initialPassword
  ruleForm.passwordLength = res.passwordLength
  ruleForm.containsCharacters = String(res.containsCharacters)
  ruleForm.containsLetters = String(res.containsLetters)
  ruleForm.containsUpLetters = String(res.containsUpLetters)
}
getList()

ruleForm.box = computed({
  get() {
    return ruleForm.containsLetters == '1' && ruleForm.containsCharacters == '1' && ruleForm.containsUpLetters == '1'
      ? '1'
      : '0'
  },
  set(val) {
    ruleForm.containsLetters = val
    ruleForm.containsCharacters = val
    ruleForm.containsUpLetters = val
  }
})
</script>

<template>
  <div class="app-container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="50" status-icon>
      <el-card class="box-card">
        <div class="title">密码管控</div>
        <el-form-item label="" prop="passwordLength">
          <div class="flex-items-center">
            <div style="width: 20px"></div>
            <span>密码至少</span>
            <el-input
              v-model="ruleForm.passwordLength"
              :input-style="{
                border: 'none !important',
                boxShadow: 'none',
                height: '20px',
                width: '100px',
                borderBottom: ' 1px solid #000'
              }"
            />
            <span>位</span>
          </div>
        </el-form-item>
      </el-card>
      <el-card class="box-card">
        <div>
          <el-checkbox
            true-label="1"
            false-label="2"
            v-model="ruleForm.box"
            label="全选/密码复杂度"
            size="large"
            @change="checkbox"
          />
        </div>
        <div class="flex-items-center">
          <el-checkbox
            true-label="1"
            false-label="2"
            v-model="ruleForm.containsLetters"
            label="是否包含字母"
            size="large"
          />
          <el-checkbox
            true-label="1"
            false-label="2"
            v-model="ruleForm.containsCharacters"
            label="是否包含特殊字符"
            size="large"
          />
          <el-checkbox
            true-label="1"
            false-label="2"
            v-model="ruleForm.containsUpLetters"
            label="是否包含大写字母"
            size="large"
          />
        </div>
      </el-card>
      <el-card class="box-card">
        <div class="title as">初始密码</div>
        <el-form-item label="" prop="initialPassword">
          <div class="flex-items-center">
            <span>初始用户密码</span>
            <el-input
              v-model="ruleForm.initialPassword"
              :input-style="{
                border: 'none !important',
                boxShadow: 'none',
                height: '20px',
                width: '50px',
                borderBottom: ' 1px solid #000'
              }"
            />
            <span>(密码复杂度和密码管控配置复杂度相同)</span>
          </div>
        </el-form-item>
        <el-button @click="preserve">保存</el-button>
      </el-card>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.as {
  margin: 20px 0;
}
</style>
